<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>兑换商品详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/mui.css"/>
    <link rel="stylesheet" href="../css/swiper.min.css">
   	<link rel="stylesheet" href="../css/convert_product_details.css"/>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left style-myself"></a>
	    <h1 class="mui-title">兑换商品详情</h1>
	</header>
	<div class="swiper-container">
	    <div class="swiper-wrapper">
	      <div class="swiper-slide"><img src="../images/index-photo.png" alt="" class="top-img"/></div>
	      <div class="swiper-slide"><img src="../images/index-photo.png" alt="" class="top-img"/></div>
	      <div class="swiper-slide"><img src="../images/index-photo.png" alt="" class="top-img"/></div>
	      <div class="swiper-slide"><img src="../images/index-photo.png" alt="" class="top-img"/></div>
	    </div>
	    <div class="swiper-pagination"></div>
	</div>
	
	<div class="price-keep-main">
		<div class="content-box">
			<div class="price-keep-box">
				<div class="price">
					<h4>苏泊尔炒锅少油烟不粘锅</h4>
					<span class="discoint">¥299</span>
					<span class="normal-price">¥308</span>
				</div>
				<div class="keep">
					<img src="../images/keep-button.png" alt="" />
					<p>收藏</p>
				</div>
			</div>
		</div>
	</div>
	<div class="number-main-box">
		<div class="content-box">
			<div class="number-box">
				<span class="product-number">商品数量</span>
				<button class="lower">-</button>
				<input type="number" value="1" class="number-input" id="number"/ >
				<button class="add">+</button>
				<span class="reseve">库存66件</span>
			</div>
		</div>
	</div>
	<div class="tabs-product-evaluate">
		<div class="product-evaluate-box mui-segmented-control">
			<a class="mui-control-item mui-active" href="#item1">商品详情</a>
			<a class="mui-control-item" href="#item2">商品评价(4)</a>
		</div>
	</div>
	<div class="product-imgs">
		<div class="content-box position-w">
			<div class="imgs mui-active mui-control-content" id="item1">
				<img src="../images/product-photo-1.png" alt="" />
				<img src="../images/product-photo-2.png" alt="" />
				<img src="../images/product-photo-3.png" alt="" />
				<img src="../images/product-photo-4.png" alt="" />
				<img src="../images/product-photo-5.png" alt="" />
			</div>
			<div class="photos mui-control-content" id="item2">
				<img src="../images/product-photo-2.png" alt="" />
				<img src="../images/product-photo-3.png" alt="" />
				<img src="../images/product-photo-1.png" alt="" />
				<img src="../images/product-photo-4.png" alt="" />
				<img src="../images/product-photo-5.png" alt="" />
			</div>
		</div>
	</div>
	<div class="buttom-button">
		<div class="red-button">
			<a href="#">加入购物车</a>
		</div>
		<div class="yellow-button">
			<a href="#">立即兑换</a>
		</div>
	</div>
    <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/swiper.min.js"></script>
    <script type="text/javascript">
    	mui.init();
    </script>
    <script>
    	$(function(){
    		$(".add").on("click",function(){
    			var i=$("#number").val();
    			if(i<0||i.length==0){
    				i=1
    				$("#number").prop("value",i)
    			}else{
    				i=parseInt($("#number").val())+1
    				$("#number").prop("value",i)
    			}
    		})
    		$(".lower").on("click",function(){
    			var i=$("#number").val();
    			if(i>0){
	    			i=parseInt($("#number").val())-1;
	    			$("#number").prop("value",i);
    			}else{
    				if(i<0||i.length==0){
    					i=1;
    					$("#number").prop("value",i);
    				}
    			}
    		})
    	})
    </script>
    <script>
    	var swiper = new Swiper('.swiper-container',{
    		pagination: {
			    el: '.swiper-pagination',
			  }
    	});
  	</script>
</body>
</html>
